<template>
  <div class="questions-container">
    <el-row>
      <el-col :span="6"><div><span>【题干】：</span>{{ questionTypeList[dialogList.questionType] }}题</div></el-col>
      <el-col :span="6"><div><span>【编号】：</span>{{ dialogList.id }}</div></el-col>
      <el-col :span="6"><div><span>【难度】：</span>{{ questionDifficultyTypeList[dialogList.difficulty] }}</div></el-col>
      <el-col :span="6"><div><span>【标签】：</span>{{ dialogList.tags }}</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div><span>【学科】：</span>{{ dialogList.subjectName }}</div></el-col>
      <el-col :span="6"><div><span>【目录】：</span>{{ dialogList.directoryName }}</div></el-col>
      <el-col :span="6"><div><span>【方向】：</span>{{ dialogList.direction }}</div></el-col>
    </el-row>
    <el-row class="underLine" />
    <el-row>
      <el-col :span="24"><div><span>【题干】：</span></div></el-col>
      <el-col :span="24">
        <p class="question" v-html="dialogList.question" />
        <el-row>
          <el-col v-if="dialogList.questionType==='3'?false:true" :span="24"><div>{{ questionTypeList[dialogList.questionType] }}题&nbsp;&nbsp;<span>选项：(以下选中的选项为正确答案)</span></div></el-col>
          <el-row v-if="dialogList.questionType==='1'?true:false">
            <el-col v-for="item in dialogList.options" :key="item.id" :span="24" style="margin:10px 0 5px">
              <el-radio :value="item.isRight?item.code:''" :label="item.code">{{ item.code + ': ' + item.title }}</el-radio>
            </el-col>
          </el-row>
          <el-row v-if="dialogList.questionType==='2'?true:false">
            <el-col v-for="item in dialogList.options" :key="item.id" :span="24" style="margin:10px 0 5px">
              <el-checkbox :value="item.isRight===1?true:false" :label="item.code + ': ' + item.title" />
            </el-col>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="underLine" />
    <el-row style="margin-bottom：0">
      <el-col :span="24"><div>
                           <span>【参考答案】：</span>
                           <el-button type="danger" @click="hVideo">视频答案预览</el-button>
                         </div>
        <div>
          <video v-if="showVideo" :src="dialogList.videoURL" controls="controls" autoplay="autoplay" style="width:400px;height:300px" />
        </div></el-col>
    </el-row>
    <el-row class="underLine" />
    <el-row>
      <el-col :span="24"><div>
        <span>【答案解析】：</span>
        <p style="display:inline-block;margin:0" v-html="dialogList.answer" />
      </div></el-col>
    </el-row>
    <el-row class="underLine" />
    <el-row>
      <el-col :span="24"><div>
        <span>【题目备注】：</span>
        {{ dialogList.remarks }}
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
import { detail } from '../../../api/hmmm/questions'
export default {
  props: {
    // 父向子传值,传递当前点击的id
    curId: {
      type: Number,
      required: true
    },
    // 父向子传值,传递处理后的questionTypeList,如{1:单选}
    questionTypeList: {
      type: Object,
      required: true
    },
    // 父向子传值,传递处理后的questionTypeList,如{1:简单}
    questionDifficultyTypeList: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
    // 用于渲染dialog里面的数据
      dialogList: [],
      // 存储当前video显示还是隐藏
      showVideo: false
    }
  },
  created() {
    this.loadDetail()
  },
  methods: {
    // 请求数据用于渲染当前的dialog
    async loadDetail() {
      try {
        const res = await detail({ id: this.curId })
        console.log('detail', res)
        this.dialogList = res.data
        // 根据abcd换顺序
        this.dialogList.options.sort((a, b) => {
          return a.code.charCodeAt() - b.code.charCodeAt()
        })
      } catch (err) {
        console.log(err)
      }
    },
    // 点击视频答案预览按钮,显示video
    hVideo() {
      this.showVideo = true
    }
  }
}
</script>

<style>
.el-row{
    margin-bottom: 5px;
}
.underLine{
    height: 1px;
    background-color: #9a9a9a;
}
.question{
    color: blue;
}
</style>
